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everything you need to know to get started in Flash 


4] 
CHAPTER TWO 
GET MORE FROM FLASH 


Flash is well known for its interface and graphical qualities, but you can also create some 
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you how to turn your hand to a cool preloader and a great browser detection movie 


735 
CHAPTER THREE 
FLASH ANIMATIONS 


Let's face it, Flash is the undoubted master of animated extravaganzas on the Web. 
We talk you through the creation of a massive animation that will attract people to 
your site like never before 


CHAPTER FOUR 

ADVANCED FLASH 

Now that you've figured out all of the basics of the program, it’s time to start getting 
advanced with Flash. Our tutorials demonstrate how you can create an amazing Web 
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WELCOME 


elcome to this special edition of Pocket Web 
Wy Projects - devoted to Macromedia's amazing Web 

animation package, Flash MX. There’s no doubt that 
Flash is the ultimate tool for creating moving, interactive 
Web sites, so there really was no contest when we came to 
pick the subject for our guide. 

We've tailored the content within the next 100 or so 
Pages so that everyone can learn something new about the 
joys of Flash. If you're new to the whole game, and want to 
learn how to create the kind of sites you've been marveling 
at for the past few years, our basics section will be right up 
your street. It doesn’t end there though, and the rest of the 
book is dedicated to teaching you the specifics of Flash that 
will enable you to create fully-featured multimedia sites of 
your very own. 

Turn the page, and you'll discover how to do everything 
from creating amazing preloaders through to building fully 
customised media players for your visitors. We haven’t 
forgotten Flash’s heritage either, and have a monster 
tutorial aimed at showing you how to create fantastic 
animated sequences. What's more, you'll find a trial of Flash 
MX 2004 on our cover disc, as well as tutorial files for every 
single walkthrough you find in the book. 

Please enjoy the book, and let me know what you think. 


Thomas Watson 
Editor 
thomas@paragon.co.uk 
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Chapter one 


FLASH 
BASICS 


DRAW OBJECTS WITH FLASH MX 


The first thing you have to learn before you get stuck into the advanced tools in Flash is 
how to draw. We do the honours here, and guide you through the basic drawing tools 
that you'll use throughout your Flash life 


GET TO GRIPS WITH LAYERS 


Drawing is all well and good, but you'll get nowhere if you don’t figure out how 
layers work. We demonstrate the many ways that these cool features will add to your 
Flash animations 


22 


AN INTRODUCTION TO SYMBOLS 


Perhaps the most fundamental of all basic Flash concepts, symbols are the very items 
that make up every single Flash animation you see. Discover how you can master 
symbols with our walkthrough 


28 


INTRODUCTION TO ACTIONSCRIPT 


Once you've figured out the basic concepts of drawing and using symbols, it’s time to start 
stretching your Flash knowledge by creating your first piece of ActionScript. Don’t worry, 
though - we'll hold your hand through your first attempt 
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THE BASICS 
OF DRAWING 
OBJECTS IN 
FLASH MX 


BEFORE YOU START WADING INTO THE 
ADVANCED ANIMATION FEATURES IN FLASH, 
LET'S FIRST GET TO GRIPS WITH DRAWING 


If you're of an artistic persuasion, you're probably used to 
(1) hy; ai)sey creating your own masterpieces with graphical packages. 
The thing about drawing in Flash, though, is that it’s 
different to using most other graphics programs so, even 
2 if you’re a dab hand at drawing with custom brushes and 
the like in Photoshop, you'll have to learn the basics of 
drawing in Flash, like the greenest of new users. 

This is primarily because Flash is a vector-based package and 
allows for the shapes you draw to be scaled to virtually any size without a loss in 
quality. In practical terms, though, this means one thing - you're going to have to get 
used to drawing the basics. Simple shapes and lines make up all the Flash animations 
you see, augmented by. some nifty design tricks to create custom shapes. For this 
workshop, we're going to create a cartoon monkey face for a Web site. Even if 
you've never had the slightest desire to draw a monkey's face in your life, you'll 
learn some valuable tricks. For a start, if you're working on one layer, as we are, 
you'll have to copy and paste items on top of each other, even when it only seems 
to complicate matters. The good thing about our face is that it is really only a series 
of ovals placed on top of each other, showing that you can garner pretty decent 
results with the pure basics. 
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1. DRAWING SHAPES 


Drawing an oval is a doddle and requires nothing more than clicking on the start point 
and dragging out to create the shape. The difficult part is making sure that the oval is the 
fight size and shape ~ you should aim for something like the shape above. 


= 


Now repeat the previous steps to create another oval inside the first one, this time with a 
slightly darker fill colour. You don’t have to worry too much about the bottom of this oval, 
but make sure that the top section lines up well with the existing oval. 


2. DRAW THE FACE 
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Now it’s time to draw the ears. Change the fill colour, then draw a much smaller circle 
away from the face (we'll explain in a moment). To draw a perfect circle, simply hold 
down the Shift key while you draw an oval on the page. 


4, COPYING AND PASTING 


Now you have to click on the new circle shape repeatedly until you've selected both the 
outline and fill inside. Press Control & C to copy this, then paste it with Control & V. Drag 
the new shape below the first one, still outside the face. 
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For the monkey to look more realistic, the ears really have to sit behind the face, which 
means you'll have to perform a small trick. Click on the face until you've selected it all, 
copy all of this, then paste it and drag it to the right of the stage. 


- 
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Now drag each of the ears in turn onto the side of the face and try to line them up. You'll 
notice that they sit in front of the head, though. This can be fixed by selecting all of the 
copied head from the side and dragging it over the original one. 
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Now, using the same fill colour as the ears, draw the mouth area for the monkey ~ this 
will involve some trial and error. Click on the Line tool, draw a line for the mouth, then 
use the Select icon to reshape the mouth into a smile. 


E ME A NOSE 


Choose a different fill colour, then draw a nose similar to the one above. Having done that, 
all that’s left to do is draw the eyes. Before you move on to that though, select everything 


in the mouth area by holding down the Shift key and clicking the different elements. 
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Orag all of the mouth elements off the bottom of the face - this lets us place the eyes 
behind this. Draw your first eye, with a fill colour of white, of course, then copy and paste 
another. Insert eyeballs as ovals with black fills. 


= _ 


10. THE FINAL FACE 


Using the UP key on the keyboard to move the mouth back onto the face. Your monkey 
face is now pretty much complete - it’s just a case of making any small changes to the 
colours to ensure that you're completely happy with your work. 
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GET TO GRIPS 
WITH LAYERS 
IN FLASH MX 


HAVING COVERED THE BASICS OF DRAWING, 
IT’S TIME TO START LEARNING HOW TO 
DEVELOP YOUR SKILLS BY USING LAYERS 


Once you get to know your way around the drawing tools in 
Flash MX, you can create some nifty pictures with very little 
effort. Having said that, though, Flash is supposed to be an 
animation tool, and using the principles we showed you on 
the previous pages, you're never going to be able to get 
anything more than static two-dimensional images out of 
the program. In order to make yourself ready for animating, 
you'll first have to learn some of the principles of building up an image, 
which can then be carried over into animating. This is where layers come in. 

If you keep drawing items on top of each other, as we saw previously, you soon 
end up chopping bits off of the bottom shape whenever you move the top one, This 
quirk of Flash is great for creating snazzy shapes, but does mean that a one-layer 
image simply won't work. Layers allow you to build up an image piece by piece, with 
each element on a separate section of the stage. If you imagine drawing different 
shapes on several clear sheets of plastic, then laying them on top of each other, 
that’s the basic concept of layers. 

The main advantage of this is that you can go back to a previous shape afterwards 
and alter it without affecting anything nearby. As you progress through this book, 
you'll see that layers will become increasingly important, and that you can’t animate 
without them. 
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Open the FLA file for this chapter on the cover CD. Click on the New Layer icon below the 
tayer list. Make sure that you change the name of the layer in question straight away to 
something relevant, or you could quickly end up being very confused. 


Now draw a rounded rectangle just inside the edges of the stage. Notice that you still 
can’t see the monkey - so you know straight away thai something isn’t right. Even though 
we've added another layer, the rectangle stili covers the monkey face. 
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PUT IT BEHIND Y' 


Correct this problem quickly and easily, by going to the Layer list and dragging 
the Background layer below the original layer. This places the background below 
the mionkey, and keeps both layers separate, so you can edit each one without 
affecting the other. 


4. ANOTHER LAYER” 


Now that we've added a background, let’s start adding actual content to the page. To 
do this, create another layer and call it ‘Text Box’. Drag this between the two other 
layers, so that it'll appear above the background but beneath the monkey. 
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5. DRAW THE BOX 


Following the same principles as before, draw a rounded rectangle as shown above, 
changing the fill and line colours to suit. Notice that you can draw over the monkey, yet 
the rectangle will always appear behind it. 


6. A TEXT 


Now create a new layer, and label it ‘text’. Make sure this resides between the Text box 
and Monkey layers, then enter your text by clicking on the Text icon in the main toolbar, 
which looks like the letter A. 
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Often, when you're working on 4 compiex animation, layer folders can be very helpful, 
as they keep all similar layers in the same place. Click on the Layer Folder button to 
create one, then rename it ‘Squares’, and insert a new layer called ‘square1’. 


Change the fill and hen insert a small square as shown above. 
These are the kind of elements you'll find yourself adding more and more when you 
come to start animating, which is when layers will prove absolutely vital. 
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MORE SQUARE 


Now, select the box that you’ve drawn then copy it using Control & C on the keyboard. 
Create new layers in the folder in the time-honoured tradition, renaming as you go along, 


then paste the box in each one with Control & V. 


Not only are layers good for letting you build up your picture or animation, they‘re also 
essential for allowing you to go back and make wholesale changes without having to start 
again from scratch. The changes above took around 30 seconds to do, for example. 
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INTRODUCTION 
TO USING 
SYMBOLS IN 
FLASH MX 


IF YOU WANT TO GET ANYWHERE WITH FLASH, 
YOU NEED TO GET TO GRIPS WITH SYMBOLS 


We've now picked up most of the basics of Flash MX, but 
there’s still one glaring omission. This missing link is the 
tool that creates just about everything you need for an 
animation, and without it you’d be completely stumped. 
In fact, you've probably created loads of these before, 
without knowing it. We're talking about symbols - the 
very lifeblood of Flash MX. 

So, what are symbols? Well, fundamentally they're graphics, buttons and movie 
clips in an animation. If you think of a symbol as a more advanced page element, 
then you're on the right road. The main difference between symbols and standard 
elements is the way that everything interacts with each other. A graphic might only 
be a vector drawing, which you could create without using symbols, but they do let 
you drag and drop it much more easily. 

The three types of symbol form a strict hierarchy, dependent on complexity. 
Graphics are simple and sit at the bottom. Buttons are slightly more complicated and 
can contain graphic symbols. Movie clips are the most complex of all and can hold 
both button and graphic symbols. Once you get out of symbols, they can all be 
placed in a ‘scene’, which is the daddy of them all. Confused? Read on... 
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1 IR FIRST SYMBOLS 


Create a graphic symbol by going to Insert, then choosing New Symbol. Now, let’s add a 
button to incorporate more advanced functionality. Go to Insert, then choose New Symbol. 
Tick the Button box, and call your new symbol ‘button’, just to keep it all straightforward. 


2. IMPORT YOUR GRAPHIC 


Because of the way symbols work, you can drag one into another. Open up the library (go 
to Window then Library), and you should see your graphic and button sitting next to each 
other. Drag the button from the library onto the stage, as shown above. 
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Now right-click on the Hit frame in the timeline, and choose Insert Keyframe. This lets you 
specify an active area on the Hit state of the button, or rather the area that, when the 
visitor moves a mouse over it, engages the rollover action of the button. 


- 
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4. DRAW THE HIT AREA 


Now it’s time to draw this ‘hotspot’. Click on the Rectangle tool and then, making sure 
that you're working on the Hit frame, draw a rectangle round the graphic area. Don’t 
worry how hideous this looks, as your visitors will never see it. 
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5. A MOVIE SYMBO) 


Having sorted the button, now it’s time to place it in a movie clip. Creating a movie 
symbol is a doddle, and follows the same pattern as before. Simply go to Insert New 
Symbol, then choose Movie Clip from the list. Call it ‘movie’ for simplicity’s sake. 


we oat | yf] | 


6. CREATE AN INSTANC 


In the time-honoured tradition, drag the Button symbol onto the stage. Once you've done 
this, create an instance of the button by clicking on the Instance Name box in the 
Properties box, and entering your own name. This will help your case very soon. 
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7. GET SOME ACTION 


With the Button symbol now placed on the movie, it’s time to add interactive elements. 
Open up the Actions panel, making sure that the Button symbol is selected. Choose 
StartDrag from the MovieClipControl sub-menu, and change the On field to ‘press’. 


[ i ce a = | 
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CHANGE THE INSTANCE 


Notice that the startDrag dialog has no target in the inverted commas, which means that 
it doesn’t know which instance to act on. To change this, double-click on the code, then 
click on the Target symbol and choose Monkey from the instance list. 
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 Aetioae Button 


os (press) ¢ 


avartDrag ("monkey") 7 

, 

on (release) { 
stopDrag(): 


9. MORE ACTION 


Now we want to apply some ActionScript that will allow the visitor to ‘let go’ of the 
monkey as soon as the mouse button is released. To do this, simply double-click on the 
stopOrag option from the MovieClipControl menu. 


|_ 


BACK TO THE START 


Click on the Scene? link just below the timeline, to take you right back to the blank 
opening stage. If there is anything on this page, delete it, then drag the Movie symbol 
onto the stage. Resize it if necessary, and test your movie by pressing on Control & Enter. 
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INTRODUCING 
CODING WITH 
ACTIONSCRIPT 


ACTIONSCRIPT IS WHAT MAKES YOUR FLASH 
FILES COME ALIVE. CHECK OUT OUR BEGINNERS 
GUIDE TO ADVANCED CODING IN FLASH 


Flash MX without ActionScript is like a car without an engine. 

You can get inside, put your seatbelt on, but you can’t go 

anywhere any time soon. ActionScript is the most important 

part of any professional Flash production. Without it, your 

movie will just run through from beginning to end, linear, 
ps “a static and (after the first few viewings) rather tedious. 

It is a scripting language, which can be used in order to tell a 

Flash MX production what to do, when to do it and how it should be done. It can 
move the movie backward and forward and it will allow users to drag and drop 
objects. It can dynamically change the size, colour and any other property of any 
object in the movie. In fact the only limit to what ActionScript can do is set by your 
own ingenuity. 

To give you an idea of where to start with ActionScript, we're going to begin with a 
simple script that allows you to use buttons to move your movie backward and forward. 
Once you understand the basics of this, you can use it to create any number of 
navigational scripts in your own Flash movies. 

We're also going to show you how to change the properties of an object. Not only 
can you change the size, positioning and rotation of an object, but you can also make it 
appear and disappear at will. Finally, we'll demonstrate how easy it is to incorporate a 
drag-and-drop element into your movie. It may seem complicated at first, but once you're 
familiar with the process, you'll be able to use it in any number of creative ways. 

Of course, scripting is a complex and involved subject that we can’t cover in just a few 
pages. However, you don't need to be a scripting expert to get ActionScript to start doing 
what you want it to do. With a little creativity, tenacity and practice, you'll soon be adding 
ActionScripts to your Flash productions, breathing a new lease of life into your creations 
and adding interactivity to your movie. 
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OPEN THE ACTIONS WINDOW 


Begin by clicking on Window, Actions (or press F9) in order to access the Actions window. 
Open up the cover CD and open the relevant project files for this tutorial. Open up 
fandb.fla and you should see a very basic movie with five frames, some text and two 
buttons on each frame. Click on the first frame... 


| = = 
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2. PAUSE THE MOVIE 


On the left side of the Actions window is a directory structure, listing ActionScript 
commands and properties. Click on Actions, Movie Control to bring up the commands we'll 
need to make this script work. Double-click on the Stop command. 
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You'll need to repeat this process for each of the frames. Just select the frame and add 
the Stop command to it. Once this is done we'll need to start adding commands to the 
buttons. Select the Forward button in the first frame (the one pointing to the right). 


3. MOVING FORWARD 


|_| 


PLAYING AROUND 


Once the Forward button is selected, double-click on goto in the Actions window. This will 
bring up a command named gotoAndPlay(). Now specify what frame you want the button 
to take you to in the relevant properties area. In this case you'll want it to move you 

forward to frame 2. 
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5. FORWARD AND BACKW: 


Now you've got the first script running, you'll need to perform similar tasks on all the other 
buttons in the other frames. The only difference is the frame you want the button to take 
you to. Backward buttons take you one frame back, forward buttons one frame forward. 


[ | 


the beginning 


@ © 


You can now test the movie by clicking on Control>Test Movie. When the movie starts, you 
should see the first frame. In order to move forward, simply click on the Forward button. 
This simple principle can be applied in any number of different ways. 
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CHANGE OBJECT PROPERTIES 


Open up ‘props.fla’ from the ActionScript directory on the cover CD. Once open you should 
see a series of properties listed, with a plus and minus sign to either side of them. There 
is also a large yellow box here. This instance of the box is called ‘yellow_box’. 


te im 
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8. FINDING THE ROOT 


Select the plus sign next to the Height label, and open the Actions window (press F9). We 
need to find the path to the yellow_box instance, and the best way to do this is to start 
from the base movie itself. This is known in ActionScript parlance as ‘_root’. Open Objects, 
Movie and double-click on _root. 
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Now we have _root, we need to add the extra code that will lead us to yellow_box. 
Fortunately, yellow_box is part of the base movie itself, so all we need to do is type 


‘_foot.yellow_box’ into the Expression property. 


10. INCREASE THE HEIGHT 


We add _height to the end of the path in order to access the Height property of 
yellow_box. Because we want to increase this by 10, the full code will be 


_foot.yellow_box._height = _root.yellow_box._height + 10’. Type this into the 
Expression property. 
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Nl. DECREASE THE HEIGHT 


Repeat this process for the Minus symbol next to the Height label, except this time the 
code will be ‘_root.yellow_box._height = _root.yellow_box._height - 10’ (we take away 
10 instead of adding it). If you want to experiment with this you can test the movie now 
by going to Control>Test Movie). 


12. CHANGE OTHER PROPERTIES 


Repeat steps nine to 11 for the plus and minus signs beside WIDTH, ROTATION, X 
POSITION, Y POSITION and ALPHA. In each of these cases the path is the same 
(_foot.yellow_box) but the property will be different; _width for WIDTH, _ rotation for 
ROTATION, _x for X POSITION, _y for Y POSITION and _alpha for ALPHA. 
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Now we move to the Off button beside the VISIBILITY label. Repeat the process, but in this 
case the property is _visible and we'll set it to = false. Do the same for the On button, but 
in this case set it t 


Now you can test the movie by clicking on Control, Test Movie. You will see our yellow 
box appear, with the properties listed next to it. Try clicking on the buttons and watch the 
effect it has on the box. This code demonstrates how you can change the properties of 
objects using a script. 
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15.. CREATE A DRAG-AND-DROP 


Open up dragndrop.fla from the ActionScript directory on the cover CD. We need to use a 
combination of movies and buttons in this drag-and-drop script in order for it to work 
properly. Now open up the library (press F11). 


sen Rect 


16. START THE DRAG 


Double-click on the drag_and_drop movie clip to edit it. In here you’! see an instance of 
the Target button. Click on it and open the Actions window (press F9). In the command 
list, open Actions, Movie Clip Control and then double-click on startOrag. Tick the 
Expression property and type this into the Target property. 
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17. CHANGE RELEASE TO PRESS 


Before we go any further, click the ‘on (release)’ command, select Press and then 
deselect Release in the property boxes above. We want the dragging to start when you 
press the mouse button, and we want it to stop when you release the mouse button. 


| eee z << : ae” | 
18. STOP THE DRAG 


Now select the area underneath the startOrag command and double-click on stopDrag in 
the command list. This creates a new ‘on (release)’ event which will be triggered when 
the mouse button is released and so put an end to the dragging. 
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19. THE IF CONDITION 


Now go back to the command list, and open up the Conditions/Loops folder. In here you 
will find the if command. Double-click on this and it should appear directly underneath the 
startDrag(); command - still inside the on (release) event. 


20. WHERE IS IT DROPPED’ 


Type ‘th roptarget == "/bullseye"’ into the Conditions property. The _droptarget 
command gives you the name of the instance the dragged object was dropped on. 
The if condition checks to see if this is bullseye, and if it is, follows the commands 
between the {} brackets. 
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In the command list select Objects, Movie and double-click on _root. In the Expression 
property type ‘_root.gotoAndStop(2)’. This path is necessary because we're writing a script 
inside a movie clip, and we want to access the base movie. 


Repeat steps 20 and 21. This time type ‘this._droptarget == "/centre_target’’ into the 
Conditions property for the if command. In the Expressions property for the _root 
command you need to type ‘_root.gotoAndStop(3)’. Now this is done, we're ready to 
start the movie. Click Control, Test Movie and see what you've achieved. 
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GET MORE 
FROM FLASH 


42 


BUILD AN ANIMATED PRELOADER 


Treat your visitors to a cool preloader while they wait for your site proper to download. We 
show you how to incorporate a percentage marker in our comprehensive guide 


08 


BUILD A FLASH DETECTOR MOVIE 


Which version of the Flash Player are your visitors using? It’s hard to tell, unless you follow 
our walkthrough and create a detector movie. Tell your visitors which version they have in 
a cool way with our guide 
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CREATE AN 
ANIMATED 
PRELOADER 
WITH FLASH MX 


PRELOADERS ARE ESSENTIAL WHEN IT COMES 
TO INFORMING YOUR VISITORS OF HOW LONG 
YOUR SITE WILL TAKE TO LOAD 


ONTHEDISC Nowadays, people are becoming more adventurous with 
their Flash designs, and with the introduction of 

——e— broadband, size optimisation is not always the first 

oO priority on some Web designers’ lists. However, there is 
still a problem with large files having to load onto slower 
machines with slower connections to the Internet. 
Without a preloader the user has no idea how long they'll 

have to wait for your Web site to load - so if you want a visitor to stick 
around and realise that your site hasn’t crashed, you really do need one. 

In this tutorial you'll not only learn how to create a percentage accurate 
preloader, but will also discover how easy it is to jazz it up. A great feature about 
the preloader you're going to make is that once you've built it you can copy it to any 
future project with ease. It will only need a few simple tweaks, and you'll never 
have to make one from scratch again. 

Follow the steps over the next few pages and you'll learn some useful Flash MX 
techniques, including creating a ‘Motion guide’ for a symbol, as well as 
ActionScripting, which can give you a new understanding of what you can achieve 
with this powerful language. 

You will only need basic knowledge of Flash MX for this tutorial, and as long as 
you know how to create layers and place items from a library onto the stage you'll 
be fine. You'll also need to know how to use ActionScript, although the code 
required is supplied. Enjoy creating the exploding preloader! 
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1 OPEN THE PROJECT FILE 


To start creating your own preloader animation, open the 
Exploding_preloader_blank.fla file on the cover CO. You will find it under 
Flash>Tutorials>Book on the disc interface. 


2 WHAT HAS BEEN SET 


Notice that the layers and the Movie Properties are set up for you. This is where a bit of 
basic knowledge is required on your part. If you know how to create layers etc, having 
this set up already makes the job of explaining the preloader easier. 
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3 BEGINNING THE TUTORIAL 


Select Windows, Library to open the library and see the ready-made symbols. Select 
the Border layer and drag the Border symbol from the library to the stage. Select 


the Title layer and drag the Title symbol over. Do the same with the Bomb layer and 
the Bomb symbol. 


| ie * Posie. e \. | 
4 ALIGN TO THE STAGE 
Select the Border on the stage with the Arrow tool (V). Now select Window, 


9 
from the menu. A small Align pop-up palette will appear. Click the To Stage button 


and select Align Horizontal Centre then Align Vertical Centre. The Border should move 
on the stage. 
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S DYNAMIC TEXT 


Next, select the Loading Text layer. With the Text tool (T) click on the stage. Open the 
Properties panel and change the properties to Dynamic Text, Verdana size 15 and a 
variable of txtPercentage. Now type ‘Lighting the fuse, please wait...’ in the text field 
on the stage. 


| = 


6 ADDING KEYFRAMES 
Now, time for some preparation for later. Select the fourth frame in the Bomb layer and 


select Insert>Blank Keyframe. Repeat this for the Loading Text and Title layers. Also add a 
blank keyframe in the first frame of the Bomb layer. You will see why a bit later. 
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7 CREATE THE LOADER MOVIE CLIP 


Select the Bomb symbol and hit Insert, Convert to Symbol. Type ‘Loaderclip’ in the Name 
field of the pop-up, then click Movie Clip>OK. Now pick the typeface, colour and style in 
Properties. Set the alignment to Centre and click the middle button. Type ‘Button’ and 
place the text in the middle. in Layers, drag the text to below the top shape. 


MX preloader 
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8 EDIT THE MOVIE CLIP 


First we need to give the instance of this movie clip a name. In the Properties 

panel type ‘Loader’ into the Instance Name field. Now with the Arrow tool (V) select 
the Loaderclip on the stage and go to Edit>Edit Symbols. You are now 

inside the Loaderclip. 
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9 ADDING LAYERS ; 2 sega 
First rename the layer with the Bomb symbol in Bomb. Next, add three more layers to 


the timeline. Do this by selecting insert, Layer. Rename these layers ‘Mask1’, ‘Mask2’ 


and ‘Fuse’. Click frame 1 in the timeline and by selecting insert Frame add 100 frames 
to all the layers. 


10 ADDING THE MA: 


Select the Mask1 layer and drag the fuse_mask symbol to the stage. This will seem 
invisible, but it’s a rectangle that’s the same colour as the background. If you select 


View>Outlines this shows the outlines of all the shapes. You'll now be able to see 
the fuse_mask. 
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Tl COVER THE ROPE 


Line up the fuse_mask with the end of the rope with the Arrow tool. Now select 
frame 85 in the Mask1 layer and insert a keyframe. With frame 85 selected, click on 
the fuse_mask. Use the Free Transform tool (Q) to scale the fuse_clip horizontally 
over the rope. 


| _| 


Now select frame 1 and choose Insert, Create Motion Tween from the menu. The frames 
should turn blue and an arrow will appear in them. Now, if you scroll through the 85 
frames, it should make the rope disappear until you get to the bend at the end. 
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Repeat steps 11 and 12 for the vertical part of the rope. First, insert a blank keyframe 
on frame 85 of Mask2 layer and drag the fuse_mask onto that frame. Insert a 
keyframe on frame 100 and scale the mask over. On frame 100 the rope should be 
completely hidden. 


Next, we need to add the sparking fuse. Select the Fuse layer and drag on the Fuseclip 
symbol. The plan is to get this movie clip to follow the rope as it disappears. First we 
need to add a Motion Guide layer. Select the Fuse layer and go to Insert, Motion Guide. 
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15 DRAW THE MOTION GUIDE 


A layer should now appear above the Fuse layer called ‘Guide: Fuse’ where you 
will draw the guide. With the Pencil tool (Y) selected trace a line that follows the rope in 
the Motion Guide: Fuse layer. Make sure that Smooth is selected in the Pencil Tool options. 


|_ 


16 SNAP TO START 


Select the Arrow tool and click on the Snap to Object button (a magnet icon). Now select 
the Fuse_Clip and move it to the beginning of the fuse rope on the stage. A little ring will 
appear and it will snap into place when it’s attached to the Motion Guide. 
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17 SNAP TO EN 


Create a keyframe on frame 100 on the Fuseclip layer, and on frame 1 create a motion 
tween using Insert>Create Motion Tween from the top menu. Using the same method 


as in step nine, attach the instance of Fuse_Clip to the other end of 
the Motion Guide. 


|_ 


18 TEST THE MOTION 


Now if you scroll through the frames of the Bomb movie clip you should see the 
Fuse_Clip follow the rope as it disappears. If it’s not working you may not have 


attached the Fuse_clip to the Motion Guide - easily done - so just repeat steps 16 
and 17 until it works. 
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19: RETURN TO DOCUMENT TIMELINE 


To get the bomb to explode once the loader gets to the end, we have to return to the 
main timeline. You can do this by selecting Edit>Edit Document from the top menu. We 
are now going to create a small, simple animation from the symbols in the library. 


BANGI!! 
Me 


20 SETTING 


Put a blank keyframe in the fourth frame of the Bang, Explosion and white_cover 
layers. Select the Bang layer and drag on the Bang symbol from the library. In the 
white_cover layer put the white_cover symbol, and in the Explosion layer place 
the fuse1 symbol. 
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With the Free Transform tool (Q) and by adding keyframes to the Bang and Explosion 
layers, you can either copy the animation that’s in the Exploding_preloader_fin.fla or 
create your own. In the next step you'll see how to fade out the white_cover. 


[ee b Of} NEN ian gL 


22 FADING INSTANCE 


Assuming you've copied the animation from the finished.fla, insert keyframes on frames 
13 and 35 of the white_cover layer. Select the white_cover symbol on frame 35, and in 
the Properties panel set the Colour property to ‘Alpha’ and set it to 0%. Now create a 
tween from frame 13. 
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23 ACTIONSCRIPTING 


All the graphics and movie clips for the preloader are now set up for action. All that’s left 
to do is add the ActionScripting in the relevant frames to make the movie work. This is 
where you'll see why you had to add those blank keyframes in step six. 


24 EXPLORING THE SCENES PANEL 
An ideal preloader jumps to the finished Web site if it’s fully loaded. A good way of doing 


this is to work using scenes. Select Window>Scene from the menu. A pop-up will appear 
that has two scenes. The Site scene in this case is the finished Web site. 
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25 THE ACTION PANEL 


Select frame 1 and click on the Action panel to open the ActionScripting environment. On 
the right you will see the commands you can double-click to add to the Scripting window. 
To remove a command click the ~ button above the Scripting window. 


To add an tem, double cick or drag the Rem to 


+- PAG - SS ey 
"false"); 

if (_root.getBytesLoaded() == _root.getBytesTotal()) ( 
gotoAndPlay("site”, 1); 

} €ise t 


fscommand ("allowscale”, 


In the first frame of the Actions layer add this code so the movie will play at 100% size, 
and if it’s loaded the preloader will not show. Make sure you set the Allowscale command 


to ‘False’. The condition for the ‘if...end’ if statement is ‘_root.getBytesLoaded() == 
_foot.getBytesTotal()’. 
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27 SETTING THE PERCENTAGE 


Now select frame 2 on the Actions layer. Insert a keyframe and add the code in the 
screenshot. This will set the text in the dynamic text field txtPercentage. The value for the 
variable is Math.round((_root.getBytesLoaded()/_root.getBytesTotal())"100) add “% loaded”. 


er ee 


txtPercentage = Math.round({ root .gecByti 
teliTarget ("loader™) ( 


) 


28 TELL TARGET. 


The next line of code to go in frame 2 tells the Loader movie clip to go to the frame that’s 
the same as the percentage of bytes loaded. For example, if 30 frames are loaded it will 
go to frame 30. The expression for the frame field is Math.round(( 
_Toot.getBytesLoaded()/_root.getBytesTotal())*100). 
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Insert a keyframe into frame 3. This is for coding that will either loop the code on frame 2 
or jump to frame 4 if the site has loaded. The code for the if condition is 
_foot.getBytesLoaded() == _root.getBytesTotal() - the same as in frame 1. 


The last step is to get the preloader to go to the Site scene. Start by inserting a keyframe 
into the last frame of your exploding animation. Now insert the code gotoAndPlay(“site”, 1);. 
Now test your movie with Show Streaming and you should have a complete preloader. 
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CREATE A 
FLASH PLAYER 
DETECTOR 


FLASH RELIES ON YOUR SITE VISITORS HAVING THE 
CORRECT PLUG-IN - SO IT’S AN IDEA TO LET THEM 
KNOW WHAT THEY NEED AND WHAT THEY 
ALREADY HAVE. A NICE WAY TO DO THIS IS TO 
BUILD AN ANIMATION... 


Building your Flash animations for the very latest version is 

ON THEDISC atisky business. Sure, some 98 percent of Web users now 

z sport the Flash plug-in, but this figure drops dramatically 

=> when you talk about just the current edition. Spending 
weeks perfecting a movie resplendent with the latest 
animations might boost your ego, but it’s not going to 
impress anyone with an older plug-in. 

There are a number of different things you can do to make sure you don’t leave your 
visitors in the lurch. You could rely on Macromedia's built-in detector redirecting your 
visitors to the latest download, but you run the risk of losing them before they've even 
started browsing your site. 

In this project, we're going to build a ‘Flash detector’ which will tell the visitor which 
version they currently have. In order to maintain their interest on what is essentially a 
felatively dull aspect to their browsing, we're fashioning an animation around this 
concept. Mimicking a security panel, our interface keys in the ‘unlock’ code to 
eventually come up with the player number. The crux of the workshop is a piece of 
code you can find on the Macromedia site that will tell Flash which player your visitor is 
using. Once you've displayed this, you can do a number of things, but we're taking our 
visitors through to the Flash Player download site (assuming their current plug-in isn’t 
bang up to date, of course). 

Because we're checking for older plug-ins, we have to publish our animation as a 
Flash 4 movie. This means sacrificing a lot of the MX toolset, but also ensures that 
virtually everyone can access your page in the first place. 
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1 DOWNLOAD THE LATEST VERSION 


We've all been taken to the Flash Player download page at some point in our lives. Even 
when you think you've only just updated your plug-in, you can often find yourself being 
asked to download another. With this in mind, we're embarking on the creation of a Flash 
detection engine, a simple process to which we've added bells and whistles. Let’s begin... 


“Mash detector 
2E2}4y Documents wens 


2 IMPORT THE 


We first need to open up the Flash detector files from the cover CD. Don't open the file as 
you normally would, though. Instead, open up Flash, create a new document, then go to 
Open as library. Find the Flash detector FLA file, then choose Open. 
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Create a new symbol (a movie clip), and drag the Keypad and Logo graphics from the 
library onto it. This will act as the foundation for everything else to go on top of. We've 
applied a motion tween fade on the logo, but this isn’t essential to the final result. 


—— _| 


Now we want to create a security panel keypad effect. To do this, create a new movie 
symbol and call it ‘Numbers’. You'll then have to drag the 12 numeric and symbol 
graphics from the library onto the stage and line them up to create a keypad. Insert 
keyframes at frames 10 and 15. 
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On your first new keyframe, click on the 3 and choose Swap Symbol. In the dialog that 
appears, choose 3 pressed. On frame 15, choose 3 from the Swap Symbol dialog to give 
the impression of the button being pressed for five frames. 


6 AND REPEAT 


Repeat the step four times to create five different buttons being pressed, making the gap 
between each ‘keypress’ different to make it look more natural (we've gone for 3,5,2,7,4 
to represent typing ‘Flash’ into a phone keypad). When you've completed this, add a Stop 
action to the last frame. 
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We've now sorted the basics, so let’s start work on the time-consuming part. Essentially, 
we want to tween in a black text box which then displays various ‘checking’ messages 
letter by letter. To start this, create a new movie clip called ‘Text Box’ and bring in the 
Intro and Number movie to the stage. 


8 START THE MOTIO 


Create a new layer, then draw a very small line using the Line tool to the top left of 
your keypad. Next up, go to frame 10, right-click on your line and choose Scale. Drag 
your line so that it fills the same width as your numbers. Click on frame 9 and choose 


Shape Tween. 
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9 ANOTHER TWEEN 


Next up, create a keyframe at frame 32. In this frame, drag your line again to create a 
rectangle as shown above. If this doesn’t provide satisfactory results, start off with a thin 
rectangle over your line in frame 11, then scale it in frame 32. Go to frame 31 and 
create a shape tween. 


L_ 


10 CREATE YOUR TEXT 


Now that the display window is sorted, it’s time to create the text to go in it. Create 
another layer and then insert a keyframe just after the window animation ended. In this 
keyframe, enter text as shown above. Because we're going for a computer display, we're 
using a suitably digital font. 
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11 EMBED YOUR FONTS 


We've used a computer font to display text (it’s Neustyle - go to www.1001fonts.com). 
Remember to embed the fonts in your animation, or your movie will be displayed with 
the default fonts. To embed a font, click each text box, select the Character button and 
select All Characters. 


- 
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There are many ways to make text appear letter by letter, and the method we're using is 
the most cumbersome, but it’s also the only method that will work on all versions of 
Flash. Create another layer and insert a keyframe as before. Now, draw a black rectangle 
that covers your text entirely. 
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Count the number of characters in your text (including spaces), then insert a keyframe this 
number of frames away from where your text resides. In this frame, simply remove the 
box to reveal the text in its entirety. As we've seen before, create a shape tween to 
slowly reveal the text. 


- 


14. FLASHING CURSOR —__ . Nee 


To create a realistic flashing cursor, simply create a keyframe a few frames after the 
tween ends, then insert a black square to blank out the cursor. Repeat this with another 
four or five keyframes, making sure to delete the square in alternate instances. 
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15 THE DETECTION CODE 


Now let’s create the Detection code. To do this, go back to the main scene and insert 
your Intro and Numbers movie clips. Create a new layer, insert a keyframe in frame 35 
and place your Text Box movie in here. Create another layer and insert a keyframe at 

around frame 115. 


_| 


Insert a text box over the black text box (you'll have to use trial and error for this 
one), then choose Dynamic from the drop-down menu shown above. Once you've 
done this, change the instance to ‘Text’ - this is vital, as it shows Flash where to look 
for the text to fill the box. 


066 PRACTICAL INTERNET WEB DESIGNER ISSUE 88 


POCKET WEB PROJECTS: FLASH MX 


+PROvES = 


eval ("Sversion") ; 


playerVersion = 
myLength = length (playerVersion) ; 
while (i <= myLength) { 
2ei¢as 


temp = substring (playerVersion, i, 1); 


“he mori 7) ol lle 


Insert the above code into the Action window, making sure that the text box is 
selected at the time. This sets Flash off searching for the type of player the visitor in 
question possesses. The playerVersion string, which we've created ourselves, is the 
key to all of this, 


if (temp eq" *) ¢ 
Platform = substring(playerVersion, 1, i-1): 

majorVersion = substring(playerVersion, i + 1, 1); 
secondHalf = substring(playerVersion, i + 1, myLength - i); 
minorVersion = substring(secondHalf, 5, 2); 

} 

| SS 

Line 13 of 13, Col 2 


18 CODE: PART TWO 


Now insert the code above, which allows Flash to determine exactly which platform and 
player number the visitor has. This even goes as far as ascertaining the exact release of 
the player, which is found via the majorVersion, secondHalf and minorVersion strings. 
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majorVersion = substring(playerVersion, 2 + 1, 1); 

aa secondHalf = substring(playerVersion, i + i, myLength - i); 
minorVersion = substring(secondHalf, 5, 2); 


} 


| text = secondiald | 


19 CODE: PART THREE 


Insert the code above, which enables Flash to display the version number in the text box 
we created earlier. The text string here refers to the instance name we gave the box in 

step 15. Insert a static text box next to this with ‘DETECTED_' written in it. Again, use trial 
and error to position it perfectly. 


20 MAKE THE TEXT APPEAR 


We want to keep the text in style with the rest of the animation, so create another layer 
and insert a keyframe on the same frame as our Player text. As before, create a black box 
that covers all your text. As you saw in the previous step, we've inserted a dash at the 
end of the Player version. 
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Insert a keyframe roughly the same number of characters you'd expect the Flash Player 
text to have - 22 should do the trick, although you might have to resort to trial and error 
to get best results. In the time-honoured tradition, scale your rectangle down, then 
motion tween it. 


As before, insert a rectangle to cover the dash. You'll need to preview your movie a few 
times to get it right, as you can’t actually see the dash when working on the stage. When 
you've got it right, insert keyframes at intervals after this. Now remove the square to give 
the blinking effect. 
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if ((majorVersion >= 6) && (minorVersion >= 69))° 
stop ()+ 

else 

gotoAndPlay (160); 


23 CODE: PART FO! 


Create a new keyframe in your text layer after the blinking has ended, then enter the 
code shown above. This basically says that everyone without the very latest player (pop 
along to www.macromedia.com to find out the latest release numbers) will be presented 
with a link to the Macromedia site. If they have it, the current animation will stop. 


tevScene 


bd GetURL (www .macromedia.com/shockwave/download) ; 
topAllSounds 


sertNetwork 
feommand 


E _| 


Insert a new keyframe one frame after this, then click on the stage to make the Action 
box active. Enter the above code to link to the Macromedia Shockwave Flash page. As 
we're working for Flash Player 4, we've had to omit the end of the URL, so users will have 
to navigate the rest of the way. 
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Go to File then choose Publish Settings. In the dialog box that appears, make sure you 
choose Flash Player 4 from the Version drop-down menu, as there’s no point 

in creating a Flash movie that checks for older players that can only be played in 
version 6 and above. 


Click on the Publish button to export your SWF and HTML files. You can test out your 
animation at any time by double-clicking on the SWF file - this should actually prove 
useful in telling you the version of the Flash Player that you have. 
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FLASH 
ANIMATION 


76 


CREATE ANIMATED SEQUENCES 


We show you how to create an amazing animation for your site that will act as both an 
intro and a Web page. What’s more, it will teach you the advanced animation techniques 
you need to learn to develop killer Flash sites in the future 
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ANIMATED 
EQUENCES IN 

FLASH MX 


ADD A MULTIMEDIA DIMENSION TO YOUR SITE 
BY CREATING MEMORABLE ANIMATED 
SEQUENCES USING FLASH MX 


ONTHE DISC Creating animated sequences is a great way to use Flash and 
add multimedia to your Web site. A memorable animation 

can be used to sell products like a commercial, show off 
aspects of your site or introduce your viewers to certain 
content. The key is to impress the visitor. You don’t 

E A necessarily have to add this kind of media as an intro movie 
- it could, for example, be from a link - but it must leave 

the visitor wanting more. 

In the tutorial we’ve supplied you 
with all the content to create an animated site overview for a fictional holiday 
company. The animation runs fast, and for that reason alone leaves the visitor wanting 
to know more. In order to get this fast-paced animation, the Flash movie has been set 
to run at 24 frames per second instead of the usual 12. The motion tweens in the 
animation are never more than around four or five frames long, so everything happens 
quickly. The whole animation has been split up into scenes, which came about through 
a series of eight screen designs that were created and then animated in Flash MX. This 
is a great way to animate content, because if the final result is right, the animation that 
takes you to that place will also be good. 

The whole animation will have a drum and bass sound loop that will further enhance 
the pace and tempo. You'll animate the first four scenes, and the remaining four will just 
require dropping movie clips onto the timeline. If you open these clips you'll see how it 
was put together, but it’s no different from what you encounter in the first scenes. 
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1 STARTING THE PROJECT 


Copy the tutorial files from the cover CD onto your hard drive. There is a Start file and an 
Ending file. Open animation-start.fla in Flash and you should see the opening scene. 
Create a new layer and drag it below the existing layer and then lock the top layer. 


— 


| 


On the top layer, scroll along the timeline, select frame 107 and press F5 to extend the 
timeline. Select your new layer and drag on the Bar symbol from the library. Position it in 
the centre of the screen at the top, select frame 5 and press F6 to move the bar to just 
below halfway down the stage. 
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Select any frame between the keyframes and change the tween to ‘Motion’ on the 
Properties bar. Select frame 6 and press F6 to add a keyframe. Now move the bar graphic 
up a bit. Add a keyframe at frame 7 and move the bar graphic down; this makes it bump 


a bit. Add another keyframe at 14. 


4 KEYFRAMES AND ANIMATION 


Add another keyframe at frame 25, then add a keyframe at frame 19 and at frame 20. 
Select frame 19 and position the bar off the screen to the right, then select frame 20 
and position the bar off the screen to the left. Motion tween these keyframes to 
animate the moving bar. 
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S MAKE THE BAR BLINK 


Select frame 35 then Shift-click on frame 38 and press F6 to add four keyframes. Select 
frame 35 and press Delete, Now select frame 37 and press Delete. This will cause the bar 
to blink on and off. Now create a new layer, drag it below the existing layer and add a 
keyframe at frame 38, 
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‘BEGIN | 
6 CLEAR THE STAGE 


Drag the Logo clip from the library onto your keyframe and position it directly behind the 
bar, then drag the keyframe to frame 39. Place the cursor at frame 39 on the layer above 
and press F7 to clear the stage. Add a keyframe at frame 49, drag on the Begin symbol 
and position as shown. 
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Select frame 62, add a keyframe and move the word ‘begin’ to the right of the screen. 
Select a frame between the two, add a motion tween, and add two more keyframes at 
frames 51 and 59. Select frame 62 and click on the Begin symbol. In the Properties bar 
change the colour to ‘Alpha’ at 20%. 
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Select frame 49 when the bar is first on the stage and change the alpha colour to 20%. 
Now select frame 63 and press F7 - this adds a new keyframe with no content. You'll 
need to drag the ‘The’ symbol onto the stage from the library and position it on the stage 
at the left-hand side. 


080 PRACTICAL INTERNET WEB DESIGNER ISSUE 88 


POCKET WEB PROJECTS: FLASH MX 


r 


| les _| 


9 COPY THE ANIMATION 


Add a keyframe at frame 75 and move the word ‘the’ to the right of the stage. Add a 
motion tween and two keyframes at 65 and 73, then at the keyframes of 63 and 75 
change the colour to ‘Alpha’ with a value of 20%. Your two words will fade in and out as 


they move across the screen. 


| i | EXPERIENCE | 
10 SAME PRINCIPLE 


Now press F7 at frame 76 and drag the word ‘experience’ from the library. Follow the 
same principle as before. As with the last two words, the keyframes are visible in the 
screenshot with the two end keyframes fading to 20%, so the words fade in and move 
across the screen. 
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1TADD A LITTLE SOUND 


Click on the keyframe at frame 49 then look in the Properties palette. There should 
be a Sound option. Click on the drop menu and select the sound called Swish. Change 
the Sync to ‘Event’, then do the same for frames 63 and 76 when the words appear 
on the screen. 


12 REMOVE THE LOGO 


On the Logo layer click frame 97 and Shift-click frame 101 to select them, then press F 
Click on the second keyframe and hit Delete, then the fourth keyframe and hit Delete, so 
you have a flashing effect. Now click on frame 105 and hit F6 to add a keyframe. 
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Select the logo on frame 105 and move it to the right of the stage so it’s off the screen, 
then select a frame between the two keyframes and motion tween the movement, 
You've now completed the first scene of animation. If you want to see it, hit Control & 
Return on your keyboard. 


14. DESTINATION SCEN 


Click on the Scene icon under the timeline and change to the Destination scene. Once 
again you'll see that there’s a new timeline. Scroll along this timeline and select 
frame 74 then press FS to extend the timeline. Add a new layer and drag this layer 
below the first. 
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15 EUROPEAN SQUAS! 


Orag the Europe symbol from the library to your new layer and rename it ‘Europe’. Add a 
keyframe at frame 5 then select frame 1 and use the Transform tool to squash the graphic 
down. Add a motion tween between the two frames so that your graphic unsquishes 
(that’s the technical term!). 


16 EXPAND FURTHER 


Scroll along the ti ine to frame 70 and add a keyframe at frames 70 and 75. Select the 
Europe graphic on frame 75 and use the Transform palette from the Window menu to 
scale the graphic to 160%. Move it to the right of the screen and add a motion tween 
between the frames. 
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17 DROP ME A LINE 


Create a new layer and name it ‘grey1’; drag it below your current layers. On frame 4 
add a keyframe then drag the Box symbol onto the stage. In the Transform palette 
make its width 66.5%, its height 208.3% and position as shown on the screen. Add a 
keyframe at frame 7. 


Move the Box symbol down vertically so it sits inside the screen, and add a motion tween 
between the two points. Add two more keyframes at frames 53 and 56. With the box 
selected on frame 56, move it off the screen vertically and motion tween the animation. 
Select frame 57 and press F7. 
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19 A NEW LAYER 


Create a new layer naming it ‘grey2’, and position under the existing layers. Add a 
keyframe at frame 9 and drag the symbol Box onto the stage. In the Transform palette 
change the width to 1500% and the height to 208.3%. In the Properties change the colour 
to ‘Alpha’ with a value of 40%. 


Create a new keyframe at frame 12, move the box down vertically so it fills the space 
onscreen, and motion tween these frames. Create keyframes at 59 and 62 and, with the 
box selected on frame 62, move it off the screen vertically and motion tween the frames. 
Select frame 63 and press F7. 
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Create a new layer naming it ‘Select’, and position it above grey1. Create a keyframe at 
frame 5 and type the title as shown onscreen. Select frame 6, Shift-click frame 9 and 
press F6 to create keyframes. Select frame 6, hit Delete and do the same for frame 8 to 
make the title flash. 


|. a 


22 ADD A DESTINATION 


Create a new layer and position it under the Select layer; now create a keyframe at 
frame 9 and drag the Croatia symbol onto the stage and change the alpha in the 
Properties to 40%. Click on the left ruler, drag a guide onto the stage and position it to 
the left of the title. 
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23 ANIMATE DESTINATION 


reate a keyframe at frame 11 and move the Croatia symbol horizontally to line up with 
he guide. Then change the alpha value back to 100%. Finally, motion tween the frames 
etween the keyframes. Now create nine more layers below the Croatia layer to add the 
ther destinations. 


24 REPEATING THE STEPS 


Now you'll need to repeat steps 22 and 23 for each of the destinations, bringing each 
new destination onto the stage where the last one finished. Look at the timeline above 
0 see the offset for each layer of animation, bringing the nine destinations on in 
alphabetical order as shown. 
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25 ADD CIRCLES 


Create a new layer, name it ‘Circles’, position it above the Europe layer and create 
a keyframe at frame 31. Drag on the Circle Spin symbol from the library and use 
the Transform palette to change the size to 20%. Position the circle above the UK 
on the map. 


> 
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26 MORE CIRCLES 


Add another keyframe at 33 and copy and paste the Circle symbol, positioning it over 
another country. Keep adding keyframes at frames 35, 37, 39 and 41, each time 
pasting in one more circle and positioning it over a new country as shown in the 
screenshot above. 
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REMOVING ANIMATI 


For each of your Destination layers, the screen title and the Circles layers, the animation 
needs to be removed at frame 54. Click on the appropriate layer on frame 54 and press 
F7. Do this for each layer in turn until the animation is removed, and select frame 60 of 
grey! layer and add a keyframe. 


28 ADD AB! 


Drag the symbol box1 from the library and position it on the stage as shown above. 
Then create a keyframe at frame 63 and move the box1 symbol so that it’s over the 
main area of Europe on the other side of the screen. Then add a motion tween to 
animate the movement. 
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29 BLINK AND IT’S GONE 


Select frame 67, SI k frame 70 and press F6 to turn them into keyframes. Select 
frame 67, press Delete and repeat for frame 69. Add a keyframe at frame 74, select box1, 
increase the scale to 160% and place it over the new position of the Europe graphic. Now 
add a motion tween. 


You can test the movie by pressing Control&Return, as you have now finished this scene. 
When you return to the movie, click on the last frame of the Destination layer and right- 
click. Choose Copy Frames from the list then change the scene to the Apply scene by 
clicking the Scene icon. 
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On the Apply scene create a new layer, hold down the right mouse button and choose 
Paste Frames. Click on the Europe graphic and change the alpha value to 40% in the 
Properties palette. Select frame 57 of both layers and press FS to extend the timeline. 


32 APPLY LAYER 


Create a new layer above Europe and name it ‘Apply’. Drag the apply2 symbol onto the 
stage and position it in the top left of the screen. Now create a keyframe at frame 4, 
move it horizontally onto the stage and add a motion tween. At frame 1 change the 
alpha to 40%. 
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33 ANIMATED ENVELOPE 


Create a new layer, name it ‘Envelope’, add a keyframe at frame 7 and drag the Letter 
symbol onto the stage to the left of the Apply symbol. Animate it as in the previous step 
so it comes onto the stage, but use frames 4 to 7. Create a new layer, name it ‘Box’ and 
place it below the Letter layer. 


|_ 


On the new layer create a keyframe at frame 7 and drag box 2 from the library onto the 
stage behind the envelope and title. Change the alpha to 0% and then create a keyframe 
at frame 10 and change the alpha to 40%. Motion tween between the frames to make 
the bar fade in. 
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Create a new layer and name it ‘Text’. Add a keyframe at frame 10 and drag the Text 
symbol onto the stage as shown. Select frame 11 and Shift-click on frame 14, pressing F6 
to add keyframes. Select frame 11 and press Delete, then do the same for frame 13 to 
make the text flash. 
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36 BRING IN THE TRANSPORT 


Create a new layer called ‘Coach’ and place the Coach symbol on a keyframe at frame 13. 
Place the coach to the bottom-right of the screen with an alpha value of 40% and a scale 
of 50% in the Transform palette. Add a keyframe at frame 17 and move the coach to line 
up with the text. 
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At the new keyframe, change the alpha to 100% then add a motion tween between the 
keyframes. Add two more layers and stagger the animation of the Plane and Train 
symbols so they align as shown. Create a new layer with a keyframe at frame 25 and add 
the Arrow symbol, scaling it to 30%. 


pt é : 
38 TRAVEL SCENE 


Change scenes now to the ‘Travel’ scene and select frame 60 then press F5 to extend the 
timeline. Create a new layer and name it ‘Content’, and drag on the Travel Clip symbol 
from the library. Click on the symbol and adjust the x location in the Property palette to - 
32.5 and the y to 33.5. 
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39 INCREASE THE 


Add a keyframe at frame 35 and scale the symbol to 160%. Position it with the Properties 
palette at -308.4 on the X and -71.2 on the Y axis. Create a new layer above it, name it 
‘grey’ and drag the Box symbol onto the stage. Rotate it 90 degrees and scale. Create a 
keyframe at frame 5, select frame 1 and move the box off the bottom of the screen 
vertically. Motion tween between these keyframes so that the box slides onto the screen. 
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40 SLIDE THE BOX 


You've got the hang of the animation technique now, as it’s just motion tween graphics, 
so the remaining sections are pre-built movie clips. Change scenes again to the Depart 
scene. Select frame 40 of the top layer, press FS to extend the timeline, create a new 
layer and name it ‘Content’. Drag on the Airport clip and place it as shown. 
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41 GETTING THE HANG OF IT 


You've got the hang of the animation technique now, as it’s just motion tween graphics, 
so the remaining sections are pre-built movie clips. Select frame 40 of the top layer, press 
F5 to extend the timeline, create a new layer and name it ‘Content’. Drag on the Airport 
clip and place it as shown. 
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42 ARE YOU EXPERIENCE! 
Change to Experience, then select frame 151. Press FS to extend the timeline, create a new 
layer, name it ‘Content’ and drag it below the top layer. Drag the experience2 symbol onto 
the stage. Change to the ‘Closing’ scene and extend the timeline of the top layer to frame 


120 by selecting it and pressing FS. Create a new layer and name it ‘Urban’, dragging it 
below the existing layer. Position the ‘Urban Exp’ symbol from the library. 
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Click on frame 32 and press F7 to remove the clip from the timeline with a blank 
keyframe. Create a new layer, drag it below the existing layers and name it ‘Photo’. Drag 
the exp2.png symbol from the library onto the stage as shown. On the Urban layer, drag 
box2 onto the stage at frame 32. 
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44 FADING THE LAYER 


Use the Transform tool to increase the size of the box2 symbol so it fills the screen. Add a 
keyframe at frame 40 and reduce the alpha value to 0%. Add a motion tween between 
these keyframes, select frame 41 and press F7. At frame 41 drag the symbol bar onto the 
stage as shown. 
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Create a keyframe at frame 43 and move the bar slightly over to the right as shown. Now 
motion tween between these points. Select frames 55-59 and press F6 to add keyframes. 
Select frame 55, press Delete then do the same for frame 57 and 59. Create a new layer, 
naming it ‘Logo’. 


46 ADD THE LOGO 


Create a keyframe for your new layer at frame 58, drag on the symbol Logo from the 
library and position this logo behind the Bar symbol on the screen. Select frame 67 of 
the Urban layer and press F6 to add a keyframe. Drag the Are symbol onto the stage 
from the library. 
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CHAPTER FOUR 


ADVANCED 
FLASH 


102 


BUILD A STUNNING WEB INTERFACE 


Creating your Web site in Flash can not only improve your knowledge of the program, but 
it can also make your site a far more enticing prospect for potential visitors. We enlist the 
help of industry experts to show you the ropes 


120 


BUILD A VIDEO PLAYER WITH FLASH MX 2004 


The latest version of Flash now incorporates even more video capability than before, and 
allows you achieve incredible results thanks to the Flash Video format. We show you how 
to create an individual video player for visitors to your site 
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BUILD A 
STUNNING WEB 
INTERFACE 


USE FLASH MX 2004 TO CREATE AN INTERFACE 
THAT'S EASY TO FOLLOW AND YOU'LL REAP 
THE REWARDS IN TERMS OF HAPPY VISITORS 


Interface design is about making it as easy as possible for 
visitors to navigate your site. And everyone knows that an 
intuitive navigation will stop visitors leaving in frustration 
before they find what they are looking for. However, 
there is no reason the navigation on your site shouldn't 
look good as well as performing its important function. 
— _ And in this latest version of Flash, you have the flexibility to do 
something a bit unusual with your interface that complements the look of your 
content. You can create and animate your interface elements using the unique 
mixture of design and timeline tools, then add interactive control with ActionScript. 

Flash has come in for some criticism mainly due to bloated downloads and 
unintuitive interfaces. By paying careful consideration to the structure of your content 
in the design stages, coupled with a good understanding of some basic interface 
techniques, these pitfalls can be avoided and you can start creating fast-loading, 
engaging interfaces. 

If you are going to be regularly updating your site, you also want your interface to 
be flexible - you certainly don’t want to be searching for elusive snippets of 
ActionScript to edit whenever you add a new page. We're going to show you how to 
build an interface based on the ‘breadcrumbs’ principle, and produce a system that 
looks slick and feels intuitive but doesn’t slow down your progress around the site - 
in this case a home page for an imaginary record label. The structure of the site is 
going to be defined in simple ActionScript on the first frame, which makes performing 
updates easy. 
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Select File>~New. When the New Document dialog box appears, select Flash Document and 
Size in the Properties Inspector, setting the movie size to 570x600 pixels. Next up, save 
your document as a Flash MX 2004 document. 


2 ADDING GRAPHICS 


Set the movie's background colour to #EFF2F2 in the Properties Inspector and create three 
layers. Name them ‘graphics’, ‘logo_text’ and ‘actions’. Import menu_gradient.png by 
clicking the Graphics layer and selecting import>Import to Stage from the File menu. 
Position the graphic at X:22, Y:0. 
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3 ADDING SOME DESIGN 


We need to add some design to our interface. Create a white box, 65x526 pixels, and 
place it on the Graphics layer at x:22, y:0. Most of our interactivity happens below this 
area, so you can add a design of your choice in this area, or use the one we created 
on the disc. 


4 CREATE THE INTERFACE ELEMENTS 


To keep the interface easily updateable, were going to use ActionScript to position and 
control interface elements. The first element is the menuOption. Select New Symbol from 
the Insert menu. in the Create New Symbol dialog, name the symbol menuOption and 
select Movie Clip as the Behavior. 
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5S THE BUTTON MOVIE 


Create three layers called ‘button_state’, ‘text’ and ‘actions’ inside the menuOption movie 
clip. On the button_state layer, create a coloured block 154x14 pixels. Select this block 
and press F8 to turn it into a symbol. In the dialog, name the block ‘button_bar’ and select 
Movie Clip as the behavior. 


6 BUTTON STATES 


Place the playhead on frame 3 of the button_states layer and press F6 to create a 
keyframe. Repeat this on frames 7, 11, 21, and 25. Place the playhead on frame 1 
and click the button_bar movieclip. In the Properties Inspector, select Color>Tint, and 
set to #FFFFFF. 
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7 BUTTON STATE — FADE 


Click on the keyframe in frame 3 and in the Properties Inspector, set the Tween to Motion 
and the Ease to 73 Out. Click the keyframe in frame 7 and repeat these properties. 


Without moving the playhead, click the button_bar movieclip and in the Properties 
Inspector set the Color to Alpha 0. 


8 BUTTON STATE — ROLLOVER 


Click on the keyframe in frame 11 and set the Tween to Motion and the Color to 40. Click 
on the keyframe in frame 21 and set the Tween to Motion and the Ease to 73. On the 
final keyframe, set the Alpha to 100. 
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9 ADD THE TEXT 


Click on frame 2 of the Text layer and press Fé. Select the Text tool, making a text box 
positioned at X:3.4 and Y:-1.8. In the Properties Inspector select Dynamic Text, change the 
font to Silkscreen size 10 and the colour to #993366. Now press the Alias Text button. 


Place the playhead over frame 1 of the Actions layer, and in the Properties Inspector type 
‘start’ in the Frame Label. Repeat this process on frame 7 giving it the label ‘over’, and on 
frame 21 with the label ‘open’. Open interface.fla from the disc and copy the ActionScript 
onto these frames 
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Tl CREATING THE SHUTTER 


The next element we need to create is the shutter. Select the Insert menu then New 
Symbol. In the Create New Symbol dialog, name the symbol ‘menuOption’ and select 
Movie Clip as the Behavior. Create five layers called ‘shutter’, ‘graphics’, ‘pre_loader’, 
‘actions’ and ‘flags’ inside the shutter movie clip. 
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12 ADD ANIMATION AND ACTIONSCRIPT 


The construction of this movieClip is similar to menuOption. Open the interface.fla file 
from the disc and copy the animation steps and ActionScript. Pay attention to naming the 
dynamic text fields and the open and shut keyframes. Create your own graphics or use 
the ones on the disc. 
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placed on frame 1 of the Action layer. Our 
navigation has a top level menu with two further sub-menus, The content of the 
sub-menus will obviously depend on the options chosen in the higher menus, The first 
step is to define the content of the menus. 


14 NAVIGATION ARRAYS 


Create two ActionScript arrays defining the top-level menu - one to hold the titles of the 
options (menuTitle1) and the second to contain the filenames of the content for when 
that option is clicked (menuSWF1). The number at the end of the name explains which 
menu they belong to. 
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TOA ARPATS 
var menuTitiel = sew Array(02 Artiste Releaces”,"93 Gig Listing", "94 buds 05 Domnioads™): 
vat menuSUT) = new Array(*nubt.suf*, "none", "aope™, “none”, "no0"): 


var menuTitiel 1 + new Arcey 
var menuS¥P1_1 = new Array (7s 


var menuTitiel_2 + new Areay(” 
var menuSUTi_2 = new array(*zub2.e 


vac wenuTit lela * new Aray("9: Fe 
yar menuSWPi_3 = new Areay(*=ub2.. 


var menuTitle 
yar menu3¥P)_ 


new Arey (702 
ues Array ("sun2 


var menuTitier 5 + ney Arcay(™ 
var menuSUri_S = new Are@y (7a 


vac menuTitiel_1_1* new acray(*0 
ie menuS¥T 11 = new aceay (™sub 


15 SUB-MENU ARRAYS 


Create similar arrays for the sub-menus. The naming will define its parent menu option, 
eg, when the third option in the top menu is clicked it will trigger a sub-menu defined by 
menuTitle1_3 and menuSWF1_3. Placing the value ‘none’ in the menuSWF array means 
no content will be loaded. 


16 CONTROL VARIABLES 


The Control variables determine the positioning and size of the navigation and are defined 
here so they can easily be altered to your own design. Other variables are defined that 
will be used in the activation and control of the navigation. You will see how these 
variables are used later. 
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Next, create a function that controls the shutter movie. It defines the content to be 
loaded with reference to the Navigation arrays defined at the start of the frame. This 
will be called with the values of the menu to be opened and the arrays to be used 
for the options. 


Opentienuetunct ton(menu, arrayval) ( 
Tor (4*1; 1<*opt ions; 146) ( 

menu{ "opr ton7+4] -gotoAndseop 

penu{"option@+1) ._visibieetal 


, 
menu. visibiesteues 
_N0Ot minberOpt tons=_root {*wenuTit le*sareayval) . Jengtbs 
Tor (x*0;tcnunberope rene: 1+4) ¢ 

ope=1 

menut "op: tonsopt) .citles root ["menuTit ie“ eaceayvail [4]: 


o  sopentnterval) : 
_ 00" .openNexe: 
openinterval * sectarerval(_ root, "openvptian@,70,menu) : 


funct ton opendption menu} f 
UE (openttext<* root number opt tons) ( 


18 USING SETINTERVAL 


The openMenu function displays the options in a menu one at a time, giving the 
staggered effect. The slight delay is implemented using the setinterval global function. 
This calls another function (openOption) every 70 milliseconds. When all options are open 
the clearinterval function is called. 
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19 ATTACH THE SHUTTER 


Attach an instance of the shutter symbol to the stage. To use attachMovie, you have to 


specify an identifier in the symbols Linkage properties. Right-click on Shutter in the library 
and choose Linkage... When the dialog appears, check Export for ActionScript and specify 
the identifier as ‘shutter’. 


20 CONTENT HOLDER 


Create an empty movie clip for the content, using the createEmptyMovieClip function. 
Specify the name of the empty movie, its content and depth. Now the shutter and 
content movies have been attached and named, their _x and _y properties are set to 
position them correctly. 
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Create the menus as specified earlier with the Menus variable. As building each menu will 
involve the same tasks, set up a ‘for’ loop to repeat the process. Each iteration of the loop 
will create and position an empty movieclip, assign it variables and functions and attach 
the menuOption clips. 


attachMovie("shutter”, "shutter*, 1000) : 
shutter. _x=22; 
shutter,_y=185: 


CreateEmptytovieC1ip( "content, $00) : 
content. x=22: 
content. _y=185; 


7) GeeePATE The ENE 

for (var ist icemenus: 14+) ( 
createEmptyMovieC lip ("xenu"+1,2000+4) : 
Foot (“menu"+4] ._x*navx+ (1-1) *spacingk: 

Foot( "menu" +t] 

root {*nenu"+3] .menulDet, 

rout ["nenu"+1] -arrayvale7i"; 


Use createEmptyMovieClip, but this time the name, depth and _x value are assigned 
depending on the iteration (i) of the ‘for’ loop. The name is ‘menu’ with the iteration 
appended, eg, menut. The depth will be 2000+i. The _x value uses spacingX to move 
each consecutive menu. 
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Variables menulD and arrayVal are assigned to be used later. Attach a resetMenu function 
to each clip, which can be called with reference to that particular instance. This takes one 
parameter, ‘spare’, which will reset all the options in this menu, apart from the one 
selected (specified by spare). 


A while loop is used and a variable opt incremented with every iteration. As long as the 
menu contains an instance called ‘optionopt’ the looping continues. In this example each 
menu has five options, so the loop will stop when opt reaches 6 and it checks for the 
existence of option 6. 
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false: 
Andsrop ("over") 


3 smenutben 1) 

(chis.menulDet)]._visiblestalne: 

“+ (chin menulD41) ] .chosendpt ion: 
19-menuiD¢1) } -resetReny (0) 


25 CLOSING SUB-MEN 


For each option instance in the menu (apart from the spare) the playhead is sent back to 
the ‘over’ frame and the variable open is set to ‘false’. The function then checks for a sub- 
menu (menuz2 will have the sub-menu menu3) and ensures it is invisible and reset using 
its resetMenu function. 


> 
foot ("menu"+i} ._visiblestaize: 
for (var *1:3<*options: 3+) ( 
Foot ["neau" #1) .attachHovie ("eenuoption™, “options, 9)2 
Foot ["menu"+4] (“opt ion”+3] «_x=02 
Foot {“menu"44} ["option"+3] ._y= (3-1) * root spacingY: 
root ("menu"+1} ["option"+}) -open=false: 
oot ("menu"¢3} (“opt ion"+3) .optionID=3; 


26 ADDING OPTIONS 


Make the menu instance invisible. Using a ‘for’ loop, instances of menuOption are 
attached to the empty menu movie. The _y value is increased on each loop to align the 
options below each other. Each option is designated an optionID and a variable open 
initially set to ‘false’. 
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_root("menu"#1] ._visiblesfalze: 

for (var J1;3<moptions; 3++) ( 
_coot["menu+i] .attachMovie("menudption", "optien"+3, 117 
“root ["meau"44] [opt iou"+3] -_x=07 


Troot {"menu"+4] ("opt ion"+9] -_y* (3-1) *_rootspacingY: 

“root ("menu"+1] [Yoption"+3} .openstalze: 

Trooet"menu"+s] (Topeion"+3} -optionID=32 

“root ("menu"+i} ("opt ion"+3] .onRol Lover=tunct ton () 
Af ({ehis. open) chis.gotoAndPlay ("over") ; 


) 
“root ["menu+4] (opt ion"+)) ,onRol iCutefunction() ( 
tf (!thin.open) rhis.gotoAndStop ("over") 
’ 
_root ["menu"+s] (Tope ion"+3] onPress=runct 10n() ( 
this. gotoandPlay ("open"): 
_root,closeShutter (this. _parent.arrayVal,this,optionID) 


27 ADDING BUTTON FUNCTIONALITY 


The options are made to behave like buttons by assigning onRollOver, onRollout and 
‘onPress functions to them. These send the playhead to different frames as the mouse 
moves over the option. In onPress the closeShutter function is also triggered, which 
loads the new content. 


gth level | 


28 GETTING THE CONTENT 


The closeShutter function needs two variables to determine which content to load, the 
option!0 of the option selected, and the suffix of the menuTitle and menuSWF array to 
use. This suffix will have been generated as the variable arrayVal in the parent menu 
movie when the menu was opened. 
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‘Actions for Frame 1 of Layer Name actions 


_Foot ["menu”+1] [opt ion"+} .onPol1Cut=funct 16n() ( 


if(!this-open) this. gotoAndStop ("over"): 
) 
_root ["menu"+1] ["option"+)] .onPress*function() ( 
this. gotoAndPlay ("open") z 
_root .closeShutter (this._parent.arrayVal, this.optionID) ; 
, 
_toot ["menu"+1) ["option"+3] -openSub=funct ion () ( 
this-open=true; 
nextHenu= root ["menu"+(this. parent .menuID+2)]? 


29 OPENSUB FUNCTION 


The last function to assign to the individual options opens the appropriate sub-menu 
for that option. It is called from the open frame of the menuOption timeline. It sets 
the open variable for this option to ‘true’ and calculates the movieclip of its sub-menu 
from the parent menulD. 


y 
_Foot ["menu"+1] (Yoption”+3] .onRol 1our=funct ton() ( 
i (!this.open) this. gotoAndStop ("over"): 


d 

_Foot ["menu"+1) ("opt ion"+3] .onPress=funct ion () ( 
this. gotoAndP lay ("open™) + 
_Foot .closeShutter (this. parent .arrayVal,this.optionID) ; 

d 

_toot ["menu"41] ("opt ion"+3] -openSub=funct ion () ( 
this.openstrue: 
nextMenu=_root("menu"+(this._parent.menulD+1)]; 
this._parent.resetMenu(this.optionID) ; 
nextNenu.arrayVal-this._parent.arrayVal+"_"+this.optionID; 
_root -opentienu(nextMenu, nextMenu.arrayVal) : 


d 
2 at 
30 RESET OTHER OPTIONS 


Opensub then calls resetMenu, to reset the other options, and calculates the value of 
arrayVal for the sub-menu from this menu's arrayVal and the optionID chosen. For 
example, if option 4 is chosen from arrayVal 2_1, the arrayVal for the sub-menu is 
2_1_4. It then calls openMenu on the sub-menu. 
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openMenu(menul, 1); 
shutter,gotoAndPlay(' open’): 
top ()s 


STINITIATE THE NAVIGATIO 


The menus have now been completed, so let’s initiate the navigation. On frame 2, call the 
openMenu function for the top level menu. Specify a menu to open (menut) and the 
suffix for the navigation arrays to use, simply ‘1’. Load the home page content by sending 
the shutter to frame ‘open’. 


| Document window. Use Flash documents to set up 
the media 2nd structure for Flash movies and 


\ 
i 
| 
1 


sass 


32. CREATING THE CONTENT FLASH MOV! 


The pages that we load into our interface are in fact other SWF movies which are loaded 
into a container movieClip behind the shutter moveClip we created earlier. Let's create a 
new movie by selecting File and New. When the New Document dialog box appears, 
select Flash Document. 
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welcome 


With the movie open, select Size in the Properties Inspector and set the movie's size to 
526x415 pixels. You can add any graphics and animation you like to this movie. This will 
be your home page. You will need to create movies for all the pages of content required. 


34 PUBLISHING THE CONTENT MOVIES 


Save your content movie by selecting File>Save. When the Save dialog appears, set the 
name to ‘home.fla’ and save the movie in the same directory as interface.fla. Publish the 
movie by selecting File>Publish. Repeat for all your content movies, ensuring the names 
match those in the ActionScript. 
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CREATE A 
CUSTOM VIDEO 
PLAYER IN 
FLASH MX 2004 


DISCOVER HOW IMPORTING VIDEO INTO FLASH 
HAS BECOME MUCH EASIER THANKS TO SOME 
GREAT NEW FEATURES IN FLASH MX 2004 


The new release of Flash MX 2004 sees many of Flash MX’s 
basics advanced to a more professional level. Video in Flash 


appeared to be something of a marvel at first, but it wasn’t 

quite up to the job. the player was still pretty slow and 

couldn’t cope with anything too advanced. Also, a problem 

with importing footage that had originated on Mini DV 

meant that it always had the black edge around it which is 
normally off the edges of domestic TVs. 

Thankfully, Macromedia has addressed these issues and Flash Player 7 boasts a 20-80 
percent performance boost, enabling it to handle broader content much better. You can 
now import video into Flash using the fantastic new Video Import wizard which not only 
allows you to edit, yes edit, videos into smaller segments so you can bring in the exact 
footage, but also has colour correction tools in case your video is a bit dark. Video can 
now be cropped around the edges to remove the black borders, and these settings 
saved - so if you're using the same camera, setup can be done once and then used 
happily ever after! 

Another big change to Flash MX comes in the shape of Behaviors. Yes, we've had 
them in Director and Dreamweaver for ages and it’s almost no surprise that 
Macromedia has transferred this no-code programming into Flash. This takes the need 
to look at ActionScript out of the equation when doing simple tasks like controlling 
video - which is exactly what we'll do in this tutorial. We'll start off with a little 
animation at the beginning just to ease you into MX 2004, then it’s on to importing 
video and attaching Behaviors. 
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Download the Flash MX 2004 demo from www.macromedia.com. Open the file 
movie-player-start.fla from the cover CD. Open the library so you can see the graphics 
provided for you by pressing Controlg L. Drag the symbol player_0001.png onto the stage. 


2 EDIT THE BACKGROUND 


With the image still selected, change the position of the X and Y co-ordinates in the 
Properties palette to 0 pixels for both. Rename the layer ‘Background’ then select 
frame 10 and press F5 to extend the timeline. Select frame 11 and press F7 to add 
a blank keyframe. 
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Create a new layer and rename thi imation’. Select frame 10 and press F6. Drag the 
player.swf clip from the library onto the stage and position the line art exactly over the 
image. In the Properties palette change the colour to Tint and select White. 


& 


Select frame 58 of the Animation layer and press FS to extend the timeline. Click on a 
blank area of the stage, so that the movie properties appear in the Properties palette. 
Change the background to a deep red colour similar to the image background. 
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5 STOP THE PLAYHEAD 


Click on frame 59 of the Animation layer and press F7 to insert a blank keyframe. Press F9 
to open the ActionScript panel and type ‘stop();’. On the Background layer select frame 
58, press F6 to insert a keyframe and drag player_0048.png onto the stage. 


- 


6 POSITION BACKG! D 


Select the Background image and change its position to 0 pixels for the X and Y axis in the 
Properties palette. Select frame 65 and press FS to extend the timeline. Create a new 
layer and rename it ‘Buttons’, position it between your previous two layers and insert a 
keyframe at frame 58. 
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7 CREATE A PLAY BUTTON 


In the library click on the Plus ican to create a new symbol, name it ‘Play’ and make its 
behavior a button, then click OK. Draw a Play symbol as shown above with the drawing 
tools. Select the Hit state, press Fé to enter a keyframe and draw a large circle around 


the Play button. 


| 


8 WHAT'S A HIT STATE 


Buttons are the ideal way to add interactivity to any Web project because scripting them 


is so easily. Buttons have different states such as Up, Over and Down which are fairly 
obvious, but there is also the Hit state. This allows you to make the area to click larger 
than the button shape - which is particularly useful for text. 


124 PRACTICAL INTERNET WEB DESIGNER ISSUE 88 


POCKET WEB PROJECTS: FLASH MX 


9 MORE BUTTONS 


Now create another button in the library for Stop, this time drawing a square to represent 
‘stop’. Again, draw a circle over the keyframe on the Hit state. Then create one more 
button and name this ‘Fast Forward’, drawing two arrows this time. Again, draw a circle 


over the Hit state. 


10 ADD THE BUTTONS 


Click on the Scene 1 tab above the timeline to return to the main scene. Drag your 
buttons onto the stage and position over the button holes. You can rotate the Fast 
Forward button 180 degrees in the Transform palette so that you have a Rewind button. 
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To make the buttons look a little more like they are part of the interface in the 
background, skew them by 2.0 degrees in the Transform palette, which you can get 
access to by clicking on the Window menu and choosing Design Panels. 


~ 


12 CREATE A NEW LAYER 


Create a new layer and name it ‘Video’. Select frame 59 and press F6 to place a keyframe 
on it. Go to the File menu and choose Import and Import to Library. In the pop-up 
window, select beats-cuts-1.mov from the cover CD and click Import to Library. 
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13 VIDEO IMPORT 


The Video Import wizard will pop up. Select Embed video in Flash document and click 
Next. Select the option to edit the video first, and now click Next, as this allows the video 
to be trimmed in length before importing to Flash. The Edit window will appear onscreen. 


OOOO OD Certs) {Liao} (einen) | 
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14 EDIT THE VIDEO 


Under the video is a blue line with yellow edit points. Drag the first point in until the 
screen goes white, as this is our starting point. Now drag the second one in until the 
woman in the red jacket has gone. You will need to move these markers slowly. 
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(DSL/Cable 256 kbps 
Bit rate 225 kb 
Synch to docur 

~ Advanced settings 
{Untitled 


Click on the Create Clip button and then click Next to move on to the Encoding screen. 
Keep the Compression Profile for DSL/Cable 256 kbps. Under Advanced Settings choose 
Create New Profile, which will open the Advanced Settings window. 


16 ADVANCED SETTINGS 


Scale the video down to 90% and then crop the video 35 from the top and bottom and 4 
from the left and right. Select the option to Import to Movie Clip under Track Options. Click 
Next, then Next again. Finally, hit the Finished button to import. 
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17 ADD A STOP 


Click Yes to add the frames when the video has finished importing. Double-click the beats- 
cuts-1.mov movie clip symbol of the imported file (not the video camera symbol) 

and add a new layer to the clip. At frame 265 add a keyframe, press F9 then enter 
‘stop();’ to the ActionScript panel. 


18 ADD TO THE STAGE 


Drag the same clip onto the Video layer on the stage. In the Properties palette add the 
instance name of beats, and now press Enter on the keyboard. Go to the Window menu, 
choose Development Panels and select Behaviors to open the Behavior panel. 
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19 ADD PLAY 


Select the Play button and click the Plus tab on the Behaviors palette. From the drop list 
select Embedded Video, then Play. Select Beats, click the Down arrow and select the Video 
Camera symbol. You will be prompted to name it, so call it ‘Video’ and then click OK. 


_| 


Select the Stop button, click the Plus icon in the Behaviors palette and select Embedded 
Video. Select Pause rather than Stop, as this is slightly better than selecting the video icon 
again, and click OK to apply the behavior to the button. 


20 ADD STOP 
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21 FAST FORWARD BEHAVIOR 


Add another Behavior for the Fast Forward button, and select Embedded Video and the 
Fast Forward behavior. Now select the Video icon and enter 15 for the number of 
frames that the video should advance. Do the same with the Rewind button, entering 
15 frames to go back. 


22 SAVE AND PUBLISH 


Save your work by pressing Control&C. Press Control&Enter to publish the Flash file, and 
test the buttons to see the video being controlled by them. The buttons are quick to 
create because no programming is required by you at any stage. 
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GEEK SPEAK 


DON’T WORRY IF YOU'RE STRUGGLING TO 
GET YOUR HEAD ROUND SOME OF THE 
TERMS USED THROUGHOUT THIS BOOK. 
OUR BUMPER GEEK SPEAK SPECIAL WILL 
POINT YOU IN THE RIGHT DIRECTION 


VECTOR GRAPHICS 


These are files made up of shapes and 
lines. While this might sound glaringly 
obvious, bitmap images are made up of 
millions of tiny pixels, meaning that if you 
blow the image up, it becomes very blocky 
and you'll struggle to make out what's 
going on, Vector graphics can be blown up 
to any level you want and they'll still 
fetain the same quality. 


FILL COLOUR 


When you draw any shape in Flash MX, or 
any other program for that matter, there are 
two colours at work. The first one, the line 
colour, determines which colour the outline 
of the shape should be. The second option, 
the fill colour, tells the program which colour 
to use for the actual shape itself. 


PROPERTY 


Properties are attributes of a particular 
object with the movie, or the movie itself. 
These can be read or changed, and can 
produce some interesting effects. 


VARIABLE 


Variables are where a script stores 
information, such as numbers, strings of 
text or anything of that nature. Variables 
are given names so they can be accessed 
in the script. 
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EVENTS 


Events can be anything from mouse clicks 
to the Flash movie starting. Scripts are 
normally written to react to these events. 


SYMBOL 


A symbol is either a graphic, movie clip or 
button item stored in the movie's library. It 
is a reusable item that only has to load 
once, so is perfect for keeping file sizes 
down. If a symbol is not placed onto the 
stage or timeline, it will not be loaded into 
the final SWF file you create. Use symbols 
wisely and you can reduce the size of your 
file dramatically. 


ACTIONSCRIPT 


This is the programming language used by 
Flash. The language has been developed 
from version 5 to Flash MX, so sometimes 
commands may be used which make 
backwards compatibility impossible. 
However, the basis of the scripting is 
exactly the same. 
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BLANK KEYFRAME 


Many people, when they start to use 
Flash, do not understand or see the point 
of a blank keyframe. So what's the 
difference between a blank keyframe 
and a standard keyframe? A standard 
keyframe does not remove whatever 
items are already on the layer. If it’s a 
single symbol, you can use a keyframe 
to tween animation. The blank keyframe 
femoves whatever is on the layer at 

the frame selected, allowing other 
items to placed on that layer. It can be 
used to keep your timeline clean, tidy 
and organised. 

When you place a normal keyframe on 
the timeline by pressing F6, the object is 
still on the stage and can be moved to 
another position, ready for motion 
tweening. When you position a blank 
keyframe on the timeline, you remove any 
objects that were previously on the 
timeline, ready to either place new 
graphics or just to clear the timeline. 


TWEEN 


This is Flash’s expert method of allowing 
you to animate without having to draw 
each and every frame by hand. Basically, 
you set the start and finish points, tell 
Flash what you'd like it to do, and it will 
then fill in the gaps in between. 


KEYFRAME 


A keyframe is a frame where anything 
changes, so in order to get animation 
you need a minimum of two keyframes, 
one to contain the starting location and 
the second to contain the end location. 
Once two keyframes have been set up, 
a motion tween will need to be 
inserted to fill in the animation 
between the two keyframes. 
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EXTENDING 
THE TIMELINE 


By default the timeline in Flash is only one 
frame long. Extending the timeline 
therefore extends the length of the Flash 
movie. This is easily done by selecting the 
appropriate frame on the appropriate layer 
and pressing F5, which adds a frame at 
that point and fills in the frames between. 


LAYERS 


Layers are similar to those found in other 
programs such as Photoshop or Paint Shop 
Pro. You can place as many graphics on 
one layer as you like. However, you can 
only animate objects when there is one 
per layer. If you try to animate objects 
when there are multiple objects on the 
layer, you'll get a broken tween path 
between the keyframes. 


SCENES 


Much of the wording in Flash is taken from 
the theatre, such as ‘stage’ and ‘scenes’. A 
scene gives you a whole new timeline to 
play with, which makes it easier for you to 
plan out your movies. Scenes can be 
duplicated and reordered through the 
Scene palette. 


ALPHA 


‘Alpha’ refers to the amount of 
transparency you wish to give an object on 
the stage. It ranges from 100% which is 
opaque, to 0% which is completely 
invisible. Alpha is available from the Color 
drop menu on the Properties palette and 
can only be applied to library objects. 
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STAGE 


This is the area of the screen which will be 
published when exported in the SWF file 
for the Internet. It’s very easy when you 
have lots of graphics onscreen to lose the 
edges of the stage, and sometimes 
content which you think will be published 
is actually off the edge. Guides will usually 
help if you have this problem. 


SYMBOL 


A symbol is any object that appears in the 
library, whether it’s an animated movie 
clip, a graphic, a button, an imported 
graphic or an imported digital movie. 
Symbols only take up a small amount of 
file size when reused, as the symbol only 
has to be loaded once. 


INSTANCE 


An instance of a symbol is created 
whenever the symbol is dragged onto the 
stage. This is not the actual symbol but a 
copy of it, hence the name ‘instance’. 
Using the same instances over and over 
again can help to keep the file sizes low, 
even if they are resized and re-coloured in 
the Instance Properties once on the stage. 


ATTACHMOVIE() 


A useful function for using movie clips 
from the library via ActionScript. As long as 
you have set the Linkage properties for the 
symbol, you can place it in your movie 
dynamically from the script. 


CREATEMOVIE() 


This function allows you to create new 
movies dynamically via ActionScript. By 
using createMovie to create your menu 
movies at run-time rather than drag them. 
on the stage individually during authoring, 
you can alter the number required with 
one simple variable in the ActionScript. 
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CODE LOOPS 


A loop keeps running the same piece of 
code until a certain criteria is met. We use 
loops governed by pre-set variables to add 
the correct number of menus and options. 
This allows you to alter the layout of your 
navigation by simply editing two variables 
in the ActionScript. 


SETINTERVAL() 


Before Flash MX introduced the setinterval 
function, timing in Flash movies was 
controlled purely by the timeline. If you 
wanted a pause between processing 
segments of code you would place the 
ActionScript on different keyframes. This 
could be unreliable, as play rate differs on 
different spec computers. 

Now the setinterval function allows 
you to set a time delay between 
consecutive executions of another 
function. For example, you can use it to 
make options appear with a slight delay 
between each one. 


LIBRARY 


The library contains all the graphics, 
buttons, imported images and imported 
videos that are used in Flash projects. 
When library items are placed on the stage 
they become an ‘instance’ of the object in 
the library. You can place as many 
instances on the stage as you like without 
increasing the file size, as each instance 
refers to just the one source. 


X AND Y 


These are the two axes which Flash uses to 
Position objects on the stage. By entering 
the stage position it is possible to precisely 
control where your graphics will appear on 
the stage. The X axis refers to the horizontal 
position, left to right, and the Y axis refers 
to the vertical position, top to bottom. 
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TIMELINE 


The timeline is used to position graphics so 
that they appear at certain points on the 
stage. The playhead moves from left to 
right playing content on the timeline like a 
Movie. It can be stopped and moved to 
other positions, or other clips can be 
controlled, therefore adding interactivity 
for the user. 


ACTIONSCRIPT 


ActionScript is Flash’s own programming 
language which is very similar to other 
Web languages such as JavaScript and 
PHP in syntax. ActionScript has been 
upgraded to version 2 in Flash MX 2004, 
making it more like Java in that it has the 
ability to use classes. 


ENCODE 


All video needs to be encoded to a certain 
format. In Flash it is encoded to the 
Sorenson Spark codec (codec is short for 
compressor/decompressor) which the 
Flash Player is capable of playing back. 
Quicktime has at least ten different codecs 
built into it, which means that Quicktime 
content takes far longer to download than 
content encoded for use with Flash Player. 


KBPS 


Kbps stands for kilobits per second and is 
the data rate or data transfer speed 
needed to play the video back without too 
long a delay. The Flash movie can be 
paused with a preloader which will wait 
for all the content to load before playing 
the file back, This avoids pauses during 
playback caused by bandwidth restrictions. 
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INSTANCE NAME 


Is essential that any object on the stage 
that is controlling code, such as the 
progress slider, has an ‘Instance’ name. 
The code can look for the instance on the 
stage and check to see exactly what it is 
doing. This kind of control is vital when 
creating any kind of interactive application. 


PROPERTIES PALETTE 


The ‘Properties’ palette is the long, bar-like 
palette across the bottom of the page. It is 
one of the most useful features of Flash as 
it changes for every object selected so that 
you can amend various properties of that 
particular item. Animation can be 
tweened, Instance names inserted and 
transparency changed ~ where would we 
be without it? 


DYNAMIC TEXT 


A dynamic textbox is a text area that 
Teceives its content from a variable within 
the ActionScript in the Flash file. Each 
dynamic textbox should have a unique 
variable name for the content to display. 


EMBEDDED FILE 


When you add files to the media library of 
your Flash movie, it becomes embedded 
into the movie file. Basically, this means 
you have copied the file into the movie, 
effectively increasing the movie's file size. 


EXECUTABLE 


When you've created your movie, you can 
either save it as a standard Flash movie, 
which requires the Flash Player software to 
be installed, or you can save it as a self- 
contained executable. This has the Flash 
Player software integrated into the file, 
and means that anyone with a PC can play 
back your file. 
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STILL STRUGGLING TO GET THE MOST FROM 
FLASH? WORRY NOT, FOR WE'VE TRAWLED THE 
NET FOR SOME OF THE FINEST FLASH RESOURCES 
ON THE WEB. GET READY TO LEARN EVEN MORE... 


nar eS Ee 
eens 


FLASHKIT WWW.FLASHKIT.COM 


Probably the best Flash resource on the Web, this astonishing site has a whole load of 
tutorials for you to sink your teeth into, as well as more Flash links and tips than you 
could shake a stick at. From absolute beginner to experienced expert, there's 
something here for everyone. 


paca wart og 


Sontag Taped 18 3003) 


STREAMING MEDIA WORLD WWW.STREAMINGMEDIAWORLD.COM/VIDEO/TUTOR 


while this site is not Flash specific, it does fill any newcomers to digital video in on a lot 
of useful information. The site is specifically for streaming video on the Web through any 
of the major formats and there is a great tutorial on combining Flash with Real One. 
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ABOUT-FLASH WWW.ABOUT-FLASH.COM 


While there’s not much on this site itself to make you breathless, it does contains links to 
virtually every kind of Flash page you could ever think of. Split into various categories, you 
should be able to turn yourself into a Flash guru with all the tools linked to from this page. 


KIRUPA WWW.KIRUPA.COM 


Boasting one of the silliest names of all Flash sites, this is actually one of the best. The 
major draw here is the range of great tutorials, each of which is designed to teach you 
something impressive and worthwhile about the program. 
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ActionScrintt ara! 
pe Ls 


ACTIONSCRIPT WWW.ACTIONSCRIPT.ORG/TUTORIALS.HTML 


There are plenty of ActionScript references and Web sites out there, and there's a great 
deal of information on how it works in the documentation provided with the Flash MX 
software. However, if you want something a little more user-friendly, visit this site, 
which includes a number of detailed tutorials that take you through the intricacies of 
scripting with ActionScript. 


TRASHOCK WWW.ULTRASHOCK.CO! 


This site has really grown into a very cool community over the last few years, with a 
very hot forum that will teach you so much, as well as tutorials and source code files to 
download. Check out the Intro section for some great animated intro sequences. 
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FLASHARCADE WWW.FLASHARCADE.COM 


This si dedicated to bri 1g you hundreds of online games to play, all neatly 


arranged into categories such as puzzle games and shoot-em-up. Why not head over there 
for some inspirational games that are all created in Flash? 


Actionscript 
com 


ACTIONSCRIPT TOOLBOX WWW.ACTIONSCRIPT-TOOLBOX.COM 


One of the best sites around for finding help quickly. Its layout is very user friendly and 
the content and information you will find within it can be priceless! 
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DESIGN CHAPEL WWW.DESIGNCHAPEL.COM 


This site has one of the best intro movies ever. However, it doesn’t appear before the 
site is loaded, and you have to navigate to it under the Miscellaneous section of the Web 
site, There’s also a great portfolio on show, and this is a real testament to the kind of 
site that can be created with Flash. 
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Martin van Welie’s site documents a majority of the most ubiquitous Web interface 
design patterns. If you're looking for a way of structuring your interface and 
content, start here. 
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MOOCK WWW.MOOCK.ORG 


Colin Moock is the ActionScript Guru. His ActionScript: The Definitive Guide is a must: 
have book for Flash developers, and this site contains plenty of information on all 
aspects of Flash developing. 
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FLASH 99: GOOD WWW.FLASHS9GOOD.COM 
This site is a resource for Flash developers who want to make their sites 


more usable, It contains a wealth of useful tips to consider when 
designing an interface. 
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ON SALE NOW! 


PRACTICAL WEB PROJECTS IS THE MAGAZINE FOR PEOPLE 
WHO WANT TO MASTER THE LATEST WEB CREATION 
SOFTWARE. EACH ISSUE TAKES AN IN-DEPTH LOOK AT A 
LEADING WEB DESIGN PROGRAM AND SHOWS YOU HOW TO 
BUILD AMAZING WEB SITES AND CREATE STUNNING GRAPHICS 


DREAMWEAVER 


MX 2004 
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NOTES 
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FLASH MX 


>» BUILD DYNAMIC ANIMATIONS TODAY 


Get more from Flash MX... 
B Learn the basics of Flash creation 
@ Build a cool preloader for your site 
H Develop advanced animations with our guides 
H@ Boost your Flash skills today! 
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